<template>
  <div>
    <!-- 搜索框 -->
    <TopFilter :list="topFilterList" :cols="3" :rows="2" :labelWidth="'150'" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>

    <!-- 客户投诉处理及分析列表 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :isSelectColumn="false"
      :isExportExcel="true"
      exportFileName="客诉单受理.xlsx"
      columnsRef="khtsKhtsclfxClfxTable"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <!-- <el-button
          size="small"
          type="primary"
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportFile()"
        >导出</el-button> -->
      </template>
    </FilterTable>

    <!-- 处理 -->
    <Drawer :visible.sync="showDetail" title="客户投诉处理及分析" :width="1200" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <Detail :editComplaintId="editComplaintId" :type="'edit'" @close="cancle" />
    </Drawer>

    <!-- 投诉历史 -->
    <Drawer :visible.sync="showComplaintHistory" title="投诉历史" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ComplaintHistory :vin="chooseVin" @close="cancle" />
    </Drawer>

    <!-- 维修历史 -->
    <Drawer :visible.sync="showRepairHistory" title="维修历史" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RepairHistory :getdata="repairHistoryData" @close="cancle" />
    </Drawer>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { searchDealerOrg, getDealerUser } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import { queryComplaint, delComplaintById, acceptComplaintById } from '@/api/customerRepair/customerComplaint/customerComplaintQuery';
import { exportComplaint } from '@/api/customerRepair/customerComplaint/customerComplaintAnalysis';
import { exportExcelFile } from '@/utils/index';
import Detail from '@/pages/customerRepair/customerComplaint/customerComplaintReception/index.vue';
import ComplaintHistory from '@/pages/repair/business/customer/combination/complaint';
import RepairHistory from '@/pages/repair/business/customer/Repairhistory/historypop.vue';
import dictCode from '@/utils/dictCode';
import { searchRoleByCode, searchRoleByCodes } from '@/api/common/empSelect/index';

export default {
  name: 'CustomerComplaintAnalysis',
  components: {
    Detail,
    RepairHistory,
    ComplaintHistory
  },
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: queryComplaint, // 获取客户投诉处理及分析列表表格接口
      fetchParams: { xhrAbort: true }, // 获取客户投诉处理及分析列表表格参数
      columns: this.createTableColumns(), // 客户投诉处理及分析列表表格列
      showDetail: false, // 显示客户投诉处理及分析
      showComplaintHistory: false, // 显示投诉历史dialog
      showRepairHistory: false, // 显示维修历史dialog
      exportLoading: false, // 导出加载中
      editComplaintId: '', // 选中的客户投诉Id
      repairHistoryData: {}, // 维修历史传入数据
      chooseVin: '', // 选中的vin
      dataList: {}
    };
  },
  created() {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getEmp();
    this.getOrg();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'RANGE_DATE',
          label: '',
          fieldName: 'beginDate|endDate',
          placeholder: '选择日期',
          labelOptions: {
            fieldName: 'dateType',
            initialValue: 1001,
            itemList: [
              { text: '投诉日期', value: 1001 },
              { text: '受理日期', value: 1002 },
              { text: '关单日期', value: 1003 }
            ]
          },
          rules: [{ required: false, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '投诉编号',
          fieldName: 'complaintNo',
          placeholder: '请输入...'
        },
        {
          type: 'SELECT',
          label: '单据类型',
          fieldName: 'complaintKind',
          itemList: this.createDictList('8213')
        },
        {
          type: 'SELECT',
          label: '是否厂家下发',
          fieldName: 'isOem',
          initialValue: 10041001,
          itemList: this.createDictList('1004')
        },
        {
          type: 'SELECT',
          label: '处理状态',
          fieldName: 'handleStatus',
          initialValue: 80481002,
          itemList: this.createDictList('8048')
        },
        {
          type: 'SELECT',
          label: '结案状态',
          fieldName: 'closeStatus',
          itemList: this.createDictList('8042', [80421003, 80421004])
        },
        {
          type: 'SELECT',
          label: '投诉类型',
          fieldName: 'complaintType',
          itemList: this.createDictList('8071')
        },
        {
          type: 'SELECT',
          label: '投诉来源',
          fieldName: 'complaintOrigin',
          itemList: this.createDictList('8009')
        },
        {
          type: 'SELECT',
          label: '优先级',
          fieldName: 'priority',
          itemList: this.createDictList('8032')
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '车主姓名',
          fieldName: 'ownerName',
          placeholder: '请输入...'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          fixed: 'left',
          width: 300,
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.acceptOrder(props.row)} disabled={props.row.IF_ACCEPT == 10041001}>
                  受理
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.openDetail(props.row)} disabled={props.row.IF_ACCEPT == 10041002 || props.row.HANDLE_STATUS == 80481011}>
                  处理查看
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.del(props.row)} disabled={props.row.HANDLE_STATUS == 80481011 || props.row.IS_OEM == 10041001}>
                  删除
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.openComplaintHistory(props.row)} disabled={props.row.VIN == ''}>
                  投诉历史
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.openRepairHistory(props.row)} disabled={props.row.VIN == ''}>
                  维修历史
                </el-button>
              </div>
            );
          }
        },
        {
          title: '投诉编号',
          dataIndex: 'COMPLAINT_NO',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '是否厂端下发',
          dataIndex: 'IS_OEM',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'radio',
          filterItems: this.createDictList(1004),
          dictItems: this.createDictList(1004)
          // render: props => {
          //   return <span>{this.createDictText(props.row.IS_OEM, 1004)}</span>;
          // }
        },
        {
          title: '投诉类别',
          dataIndex: 'COMPLAINT_KIND',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'radio',
          filterItems: this.createDictList(8213),
          dictItems: this.createDictList(8213)
          // render: props => {
          //   return <span>{this.createDictText(props.row.COMPLAINT_KIND, 8213)}</span>;
          // }
        },
        {
          title: '投诉类型',
          dataIndex: 'COMPLAINT_TYPE',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'radio',
          filterItems: this.createDictList(8007),
          dictItems: this.createDictList(8007)
          // render: props => {
          //   return <span>{this.createDictText(props.row.COMPLAINT_TYPE, 8007)}</span>;
          // }
        },
        {
          title: '投诉来源',
          dataIndex: 'COMPLAINT_ORIGIN',
          sorter: true,
          filter: true,
          filterType: 'radio',
          showOverflowTooltip: true,
          filterItems: this.createDictList(8009),
          dictItems: this.createDictList(8009)
          // render: props => {
          //   return <div>{this.createDictText(props.row.COMPLAINT_ORIGIN, '8009')}</div>;
          // }
        },
        {
          title: '投诉时间',
          dataIndex: 'COMPLAINT_DATE',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '处理人',
          dataIndex: 'PRINCIPAL',
          editType: 'select',
          editable: false,
          sorter: true,
          filter: true,
          filterType: 'radio',
          showOverflowTooltip: true,
          editItems: [],
          filterItems: []
        },
        {
          title: '处理状态',
          dataIndex: 'HANDLE_STATUS',
          sorter: true,
          filter: true,
          filterType: 'radio',
          showOverflowTooltip: true,
          filterItems: this.createDictList(8048),
          dictItems: this.createDictList(8048)
          // render: props => {
          //   return <div>{this.createDictText(props.row.HANDLE_STATUS, '8048')}</div>;
          // }
        },
        {
          title: '投诉摘要',
          dataIndex: 'COMPLAINT_SUMMARY',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '投诉原因',
          dataIndex: 'COMPLAINT_REASON',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '解决方案',
          dataIndex: 'RESOLVENT',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '处理完成时间',
          dataIndex: 'COMPLAINT_END_DATE',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '结案状态',
          dataIndex: 'CLOSE_STATUS',
          sorter: true,
          filter: true,
          filterType: 'radio',
          showOverflowTooltip: true,
          filterItems: this.createDictList(8042),
          dictItems: this.createDictList(8042)
          // render: props => {
          //   return <div>{this.createDictText(props.row.CLOSE_STATUS, '8042')}</div>;
          // }
        },
        {
          title: '结案时间',
          dataIndex: 'CLOSE_DATE',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '被投诉部门',
          dataIndex: 'DEPARTMENT',
          editType: 'select',
          editable: false,
          sorter: true,
          filter: true,
          filterType: 'radio',
          showOverflowTooltip: true,
          editItems: []
        },
        {
          title: '被投诉员工',
          dataIndex: 'BE_COMPLAINT_EMP',
          editType: 'select',
          editable: false,
          sorter: true,
          filter: true,
          filterType: 'radio',
          showOverflowTooltip: true,
          editItems: []
        },
        {
          title: '底盘号',
          dataIndex: 'VIN',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车主姓名',
          dataIndex: 'OWNER_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '投诉人姓名',
          dataIndex: 'COMPLAINT_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '投诉人电话',
          dataIndex: 'COMPLAINT_PHONE',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '服务顾问',
          dataIndex: 'SERVICE_ADVISOR',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '责任技师',
          dataIndex: 'TECHNICIAN',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          editType: 'select',
          editable: false,
          editItems: []
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      this.dataList = val;
      console.log('+++', this.dataList);
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    canCalList() {
      this.fetchParams = Object.assign({}, this.dataList, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // 明细
    openDetail(row) {
      this.editComplaintId = row.COMPLAINT_ID;
      this.showDetail = true;
    },
    // 投诉历史
    openComplaintHistory(row) {
      this.chooseVin = row.VIN;
      this.showComplaintHistory = true;
    },
    // 维修历史
    openRepairHistory(row) {
      this.repairHistoryData = {
        LICENSE: row.LICENSE,
        VIN: row.VIN,
        OWNER_NAME: row.OWNER_NAME
      };
      this.showRepairHistory = true;
    },
    acceptOrder(val) {
      this.$confirm('是否确认受理?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          acceptComplaintById(val.COMPLAINT_ID).then(res => {
            if (res.resultCode == 200) {
              this.$message.success('受理成功');
              this.canCalList();
            } else {
              this.$message.error('受理失败');
            }
          });
        })
        .catch(() => {});
    },
    // 删除
    del(val) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delComplaintById(val.COMPLAINT_ID).then(res => {
            if (res.resultCode == 200) {
              this.$message.success('删除成功');
              this.canCalList();
            } else {
              this.$message.error('删除失败');
            }
          });
        })
        .catch(() => {});
    },
    // 取消弹框
    cancle() {
      this.showDetail = false;
      this.showComplaintHistory = false;
      this.showRepairHistory = false;
      this.canCalList();
    },
    // 获取全部员工
    async getEmp() {
      const res = await getDealerUser(this.editComplaintId);
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      // this.topFilterList.find(item => item.fieldName === 'principal').itemList = empList; // 处理人
      // this.topFilterList.find(item => item.fieldName === 'beComplaintEmp').itemList = empList; // 被投诉员工
      this.columns.find(item => item.dataIndex === 'PRINCIPAL').editItems = empList; // 处理人表格
      this.columns.find(item => item.dataIndex === 'PRINCIPAL').filterItems = empList; // 处理人表格
      this.columns.find(item => item.dataIndex === 'BE_COMPLAINT_EMP').editItems = empList; // 被投诉员工表格
      let testDrive = { role: dictCode.SERVICE_CONSULTANT };
      let res5 = (await searchRoleByCode(testDrive)).data.map(x => ({ value: x.userId + '', text: x.employeeName }));
      this.columns.find(item => item.dataIndex === 'SERVICE_ADVISOR').editItems = res5; // 服务顾问表格
      let tPersonType = { role: dictCode.TECHNICIAN };
      let res6 = (await searchRoleByCodes(tPersonType)).data.map(x => ({ value: x.userId + '', text: x.employeeName }));
      this.columns.find(item => item.dataIndex === 'TECHNICIAN').editItems = res6; // 责任技师表格
    },
    // 获取全部部门
    async getOrg() {
      const res = await searchDealerOrg(this.editComplaintId);
      let empList = res.data.map(x => ({ text: x.orgName, value: x.orgId }));
      // this.topFilterList.find(item => item.fieldName === 'department').itemList = empList; // 被投诉部门
      this.columns.find(item => item.dataIndex === 'DEPARTMENT').editItems = empList; // 被投诉部门表格
      this.columns.find(x => x.dataIndex === 'DEPARTMENT').filterItems = empList; // 被投诉部门表头筛选
    },
    // 导出
    exportFile() {
      this.exportLoading = true;
      exportComplaint(this.fetchParams).then(res => {
        exportExcelFile(res, '客户投诉处理情况');
        this.exportLoading = false;
      });
    }
  }
};
</script>
